<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>威客任务 - 筛选查询</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --primary-light: #EFF6FF;
      --secondary: #10B981;
      --warning: #F59E0B;
      --danger: #EF4444;
      --text-primary: #1F2937;
      --text-secondary: #6B7280;
      --bg-light: #F9FAFB;
      --bg-white: #FFFFFF;
      --border-light: #E5E7EB;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.5;
      font-size: 14px;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--primary);
      color: white;
      padding: 0.75rem 1rem;
    }
    
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link.active {
      color: white;
      font-weight: 500;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 12px 15px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .search-input-group {
      position: relative;
      display: flex;
    }
    
    .search-input {
      flex: 1;
      padding: 10px 15px 10px 40px;
      border-radius: 8px 0 0 8px;
      border: 1px solid var(--border-light);
      font-size: 14px;
      background-color: var(--bg-light);
      border-right: none;
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
      z-index: 1;
    }
    
    .search-btn {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 0 8px 8px 0;
      padding: 0 15px;
      font-weight: 500;
    }
    
    /* 高级筛选按钮 */
    .filter-toggle {
      background-color: var(--bg-white);
      padding: 10px 15px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--primary);
      font-weight: 500;
      gap: 8px;
      cursor: pointer;
    }
    
    /* 高级筛选面板 */
    .advanced-filters {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      padding: 15px;
      display: none;
    }
    
    .advanced-filters.active {
      display: block;
    }
    
    .filter-section {
      margin-bottom: 15px;
    }
    
    .filter-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--text-primary);
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-chip {
      padding: 6px 12px;
      background-color: var(--bg-light);
      color: var(--text-secondary);
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
      border: 1px solid transparent;
    }
    
    .filter-chip.active {
      background-color: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }
    
    .price-range {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    .price-input {
      flex: 1;
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      font-size: 14px;
    }
    
    .price-separator {
      color: var(--text-secondary);
    }
    
    .filter-actions {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    
    .filter-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
    }
    
    .reset-btn {
      background-color: var(--bg-light);
      color: var(--text-secondary);
      border: 1px solid var(--border-light);
    }
    
    .apply-filter-btn {
      background-color: var(--primary);
      color: white;
      border: none;
    }
    
    /* 快速筛选栏 */
    .quick-filter-bar {
      display: flex;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      overflow-x: auto;
      scrollbar-width: none;
      padding: 5px 10px;
    }
    
    .quick-filter-bar::-webkit-scrollbar {
      display: none;
    }
    
    .quick-filter-item {
      padding: 6px 12px;
      white-space: nowrap;
      font-size: 13px;
      color: var(--text-secondary);
      border-radius: 16px;
      margin-right: 6px;
      cursor: pointer;
      background-color: var(--bg-light);
    }
    
    .quick-filter-item.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 视图切换器 */
    .view-switch {
      background-color: var(--bg-white);
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
    }
    
    .view-label {
      font-size: 14px;
      color: var(--text-secondary);
    }
    
    .view-options {
      display: flex;
      gap: 8px;
    }
    
    .view-option {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      background-color: var(--bg-white);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .view-option.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 任务列表通用样式 */
    .tasks-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .task-item {
      background-color: var(--bg-white);
      margin-bottom: 10px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border-light);
    }
    
    .task-body {
      padding: 15px;
    }
    
    /* 列表视图样式 */
    .list-view .task-item {
      display: flex;
      align-items: flex-start;
    }
    
    .list-view .task-media {
      width: 100px;
      flex-shrink: 0;
      height: 100px;
    }
    
    .list-view .task-content {
      flex: 1;
      padding-left: 15px;
    }
    
    /* 网格视图样式 */
    .grid-view .tasks-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 0 10px;
    }
    
    .grid-view .task-item {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .grid-view .task-media {
      height: 120px;
    }
    
    /* 大图视图样式 */
    .large-view .task-media {
      height: 200px;
    }
    
    /* 任务头部 */
    .task-header {
      margin-bottom: 8px;
    }
    
    .task-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .task-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }
    
    .task-category {
      color: var(--primary);
      font-size: 12px;
      background-color: var(--primary-light);
      padding: 2px 8px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 8px;
    }
    
    /* 任务内容 */
    .task-description {
      color: var(--text-secondary);
      font-size: 13px;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 任务媒体 */
    .task-media {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    .task-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .no-image {
      width: 100%;
      height: 100%;
      background-color: var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .image-count {
      position: absolute;
      right: 6px;
      bottom: 6px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    
    /* 任务标签 */
    .task-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
    }
    
    .task-tag {
      padding: 2px 8px;
      background-color: var(--bg-light);
      color: var(--text-secondary);
      border-radius: 4px;
      font-size: 12px;
    }
    
    /* 任务底部 */
    .task-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--border-light);
    }
    
    .task-price {
      font-size: 16px;
      font-weight: 600;
      color: var(--danger);
    }
    
    .task-deadline {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .apply-btn {
      padding: 6px 12px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
    }
    
    /* 筛选结果提示 */
    .filter-result {
      background-color: var(--primary-light);
      color: var(--primary);
      padding: 8px 15px;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .clear-filters {
      color: var(--primary);
      background: none;
      border: none;
      font-size: 13px;
      text-decoration: underline;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 40px 20px;
      text-align: center;
      color: var(--text-secondary);
    }
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 15px;
      color: var(--border-light);
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布任务按钮 */
    .fab-button {
      position: fixed;
      bottom: 70px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
      border: none;
      z-index: 1000;
    }
    
    /* 提示消息 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand">
    <div class="container-fluid">
      <ul class="navbar-nav w-100 justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="返回">
            <i class="fa fa-arrow-left"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">威客任务</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="消息">
            <i class="fa fa-bell-o"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-input-group">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索任务、技能或服务...">
      <button class="search-btn">搜索</button>
    </div>
  </div>
  
  <!-- 高级筛选按钮 -->
  <div class="filter-toggle" id="filterToggle">
    <i class="fa fa-filter"></i>
    <span>高级筛选</span>
    <i class="fa fa-chevron-down" id="filterIcon"></i>
  </div>
  
  <!-- 高级筛选面板 -->
  <div class="advanced-filters" id="advancedFilters">
    <div class="filter-section">
      <div class="filter-title">任务类别</div>
      <div class="filter-options">
        <div class="filter-chip active">全部</div>
        <div class="filter-chip">设计创意</div>
        <div class="filter-chip">程序开发</div>
        <div class="filter-chip">文案写作</div>
        <div class="filter-chip">营销推广</div>
        <div class="filter-chip">视频制作</div>
        <div class="filter-chip">数据处理</div>
        <div class="filter-chip">生活服务</div>
      </div>
    </div>
    
    <div class="filter-section">
      <div class="filter-title">价格范围</div>
      <div class="price-range">
        <input type="number" class="price-input" placeholder="最低" min="0">
        <span class="price-separator">-</span>
        <input type="number" class="price-input" placeholder="最高" min="0">
      </div>
    </div>
    
    <div class="filter-section">
      <div class="filter-title">交付时间</div>
      <div class="filter-options">
        <div class="filter-chip">不限</div>
        <div class="filter-chip">1天内</div>
        <div class="filter-chip">3天内</div>
        <div class="filter-chip">7天内</div>
        <div class="filter-chip">15天内</div>
        <div class="filter-chip">30天内</div>
      </div>
    </div>
    
    <div class="filter-section">
      <div class="filter-title">任务类型</div>
      <div class="filter-options">
        <div class="filter-chip active">全部类型</div>
        <div class="filter-chip">远程任务</div>
        <div class="filter-chip">本地任务</div>
        <div class="filter-chip">线上交付</div>
        <div class="filter-chip">实物交付</div>
      </div>
    </div>
    
    <div class="filter-section">
      <div class="filter-title">其他筛选</div>
      <div class="filter-options">
        <div class="filter-chip">有图片</div>
        <div class="filter-chip">最新发布</div>
        <div class="filter-chip">价格从低到高</div>
        <div class="filter-chip">价格从高到低</div>
        <div class="filter-chip">热门任务</div>
      </div>
    </div>
    
    <div class="filter-actions">
      <div class="filter-btn reset-btn" id="resetFilters">重置</div>
      <div class="filter-btn apply-filter-btn" id="applyFilters">应用筛选</div>
    </div>
  </div>
  
  <!-- 快速筛选栏 -->
  <div class="quick-filter-bar">
    <div class="quick-filter-item active">全部任务</div>
    <div class="quick-filter-item">推荐任务</div>
    <div class="quick-filter-item">最新发布</div>
    <div class="quick-filter-item">高额任务</div>
    <div class="quick-filter-item">简单任务</div>
    <div class="quick-filter-item">紧急任务</div>
  </div>
  
  <!-- 筛选结果提示 -->
  <div class="filter-result" id="filterResult" style="display: none;">
    <div>已筛选：设计创意, 1000-5000元, 7天内</div>
    <button class="clear-filters" id="clearAllFilters">清除全部</button>
  </div>
  
  <!-- 视图切换器 -->
  <div class="view-switch">
    <span class="view-label">展示方式：</span>
    <div class="view-options">
      <button class="view-option active" data-view="list" title="列表视图">
        <i class="fa fa-list"></i>
      </button>
      <button class="view-option" data-view="grid" title="网格视图">
        <i class="fa fa-th-large"></i>
      </button>
      <button class="view-option" data-view="large" title="大图视图">
        <i class="fa fa-picture-o"></i>
      </button>
    </div>
  </div>
  
  <!-- 任务列表 -->
  <ul class="tasks-list list-view" id="tasksList">
    <!-- 任务1 - 多图任务 -->
    <li class="task-item">
      <div class="task-media">
        <img src="https://picsum.photos/400/300?random=1" alt="网站设计任务" class="task-image">
        <div class="image-count">3图</div>
      </div>
      <div class="task-body">
        <div class="task-header">
          <div class="task-title">企业官网设计与前端开发，要求现代简约风格</div>
          <div class="task-meta">
            <span><i class="fa fa-map-marker"></i> 远程</span>
            <span><i class="fa fa-clock-o"></i> 发布于 2小时前</span>
          </div>
          <span class="task-category">程序开发</span>
        </div>
        
        <div class="task-description">
          需要为科技公司设计并开发响应式官网，包含首页、产品展示、关于我们、联系我们等页面，要求代码规范可维护。
        </div>
        
        <div class="task-tags">
          <span class="task-tag">网站设计</span>
          <span class="task-tag">前端开发</span>
          <span class="task-tag">响应式</span>
        </div>
        
        <div class="task-footer">
          <div>
            <div class="task-price">¥5000</div>
            <div class="task-deadline">截止日期：15天内</div>
          </div>
          <button class="apply-btn">申请</button>
        </div>
      </div>
    </li>
    
    <!-- 任务2 - 无图任务 -->
    <li class="task-item">
      <div class="task-media">
        <div class="no-image">
          <i class="fa fa-file-text-o fa-2x"></i>
        </div>
      </div>
      <div class="task-body">
        <div class="task-header">
          <div class="task-title">撰写3篇关于人工智能发展趋势的技术文章</div>
          <div class="task-meta">
            <span><i class="fa fa-map-marker"></i> 远程</span>
            <span><i class="fa fa-clock-o"></i> 发布于 昨天</span>
          </div>
          <span class="task-category">文案写作</span>
        </div>
        
        <div class="task-description">
          需要3篇1500字左右关于AI发展趋势的技术文章，要求内容专业、有深度，适合科技爱好者阅读，原创度100%。
        </div>
        
        <div class="task-tags">
          <span class="task-tag">AI</span>
          <span class="task-tag">技术文章</span>
          <span class="task-tag">原创</span>
        </div>
        
        <div class="task-footer">
          <div>
            <div class="task-price">¥600</div>
            <div class="task-deadline">截止日期：7天内</div>
          </div>
          <button class="apply-btn">申请</button>
        </div>
      </div>
    </li>
    
    <!-- 任务3 - 单图任务 -->
    <li class="task-item">
      <div class="task-media">
        <img src="https://picsum.photos/400/300?random=2" alt="Logo设计任务" class="task-image">
      </div>
      <div class="task-body">
        <div class="task-header">
          <div class="task-title">咖啡店Logo设计，要求温馨简约风格</div>
          <div class="task-meta">
            <span><i class="fa fa-map-marker"></i> 远程</span>
            <span><i class="fa fa-clock-o"></i> 发布于 3天前</span>
          </div>
          <span class="task-category">设计创意</span>
        </div>
        
        <div class="task-description">
          为新开的社区咖啡店设计Logo，风格要求温馨、简约、有记忆点，需要提供3-5个方案供选择，最终交付源文件。
        </div>
        
        <div class="task-tags">
          <span class="task-tag">Logo设计</span>
          <span class="task-tag">餐饮</span>
          <span class="task-tag">品牌设计</span>
        </div>
        
        <div class="task-footer">
          <div>
            <div class="task-price">¥800</div>
            <div class="task-deadline">截止日期：10天内</div>
          </div>
          <button class="apply-btn">申请</button>
        </div>
      </div>
    </li>
    
    <!-- 任务4 - 多图任务 -->
    <li class="task-item">
      <div class="task-media">
        <img src="https://picsum.photos/400/300?random=3" alt="短视频制作任务" class="task-image">
        <div class="image-count">2图</div>
      </div>
      <div class="task-body">
        <div class="task-header">
          <div class="task-title">产品宣传短视频制作，15-30秒</div>
          <div class="task-meta">
            <span><i class="fa fa-map-marker"></i> 上海</span>
            <span><i class="fa fa-clock-o"></i> 发布于 1周前</span>
          </div>
          <span class="task-category">视频制作</span>
        </div>
        
        <div class="task-description">
          为新款智能手表制作宣传短视频，需要包含产品展示、功能介绍，风格时尚科技感，有背景音乐和字幕。
        </div>
        
        <div class="task-tags">
          <span class="task-tag">短视频</span>
          <span class="task-tag">产品宣传</span>
          <span class="task-tag">剪辑</span>
        </div>
        
        <div class="task-footer">
          <div>
            <div class="task-price">¥1500</div>
            <div class="task-deadline">截止日期：5天内</div>
          </div>
          <button class="apply-btn">申请</button>
        </div>
      </div>
    </li>
  </ul>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>任务</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 发布任务按钮 -->
  <button class="fab-button" aria-label="发布任务">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 提示消息 -->
  <div class="toast" id="toast"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取DOM元素
    const tasksList = document.getElementById('tasksList');
    const viewOptions = document.querySelectorAll('.view-option');
    const filterToggle = document.getElementById('filterToggle');
    const filterIcon = document.getElementById('filterIcon');
    const advancedFilters = document.getElementById('advancedFilters');
    const filterChips = document.querySelectorAll('.filter-chip');
    const quickFilterItems = document.querySelectorAll('.quick-filter-item');
    const applyButtons = document.querySelectorAll('.apply-btn');
    const fabButton = document.querySelector('.fab-button');
    const toast = document.getElementById('toast');
    const applyFiltersBtn = document.getElementById('applyFilters');
    const resetFiltersBtn = document.getElementById('resetFilters');
    const filterResult = document.getElementById('filterResult');
    const clearAllFiltersBtn = document.getElementById('clearAllFilters');
    const searchBtn = document.querySelector('.search-btn');
    const searchInput = document.querySelector('.search-input');
    
    // 显示提示消息
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 切换高级筛选面板显示/隐藏
    filterToggle.addEventListener('click', function() {
      advancedFilters.classList.toggle('active');
      
      if (advancedFilters.classList.contains('active')) {
        filterIcon.classList.replace('fa-chevron-down', 'fa-chevron-up');
      } else {
        filterIcon.classList.replace('fa-chevron-up', 'fa-chevron-down');
      }
    });
    
    // 筛选芯片点击事件
    filterChips.forEach(chip => {
      chip.addEventListener('click', function() {
        // 获取同组的其他芯片
        const parentGroup = this.parentElement;
        const siblings = parentGroup.querySelectorAll('.filter-chip');
        
        // 如果不是"全部"或"不限"选项，取消同组中其他选中状态
        if (!this.textContent.includes('全部') && !this.textContent.includes('不限')) {
          siblings.forEach(sib => {
            if (sib.textContent.includes('全部') || sib.textContent.includes('不限')) {
              sib.classList.remove('active');
            }
          });
        } else {
          // 如果是"全部"或"不限"选项，取消同组其他所有选中状态
          siblings.forEach(sib => sib.classList.remove('active'));
        }
        
        // 切换当前芯片状态
        this.classList.toggle('active');
      });
    });
    
    // 快速筛选项点击事件
    quickFilterItems.forEach(item => {
      item.addEventListener('click', function() {
        quickFilterItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        showToast(`已筛选：${this.textContent}`);
        
        // 显示筛选结果提示
        filterResult.style.display = 'flex';
        filterResult.querySelector('div').textContent = `已筛选：${this.textContent}`;
      });
    });
    
    // 应用筛选按钮点击事件
    applyFiltersBtn.addEventListener('click', function() {
      // 收集所有选中的筛选条件
      const selectedFilters = [];
      
      document.querySelectorAll('.filter-chip.active').forEach(chip => {
        if (!chip.textContent.includes('全部') && !chip.textContent.includes('不限')) {
          selectedFilters.push(chip.textContent);
        }
      });
      
      // 收集价格范围
      const minPrice = document.querySelectorAll('.price-input')[0].value;
      const maxPrice = document.querySelectorAll('.price-input')[1].value;
      if (minPrice || maxPrice) {
        selectedFilters.push(`${minPrice || ''}-${maxPrice || ''}元`);
      }
      
      if (selectedFilters.length > 0) {
        showToast(`已应用 ${selectedFilters.length} 项筛选条件`);
        
        // 显示筛选结果提示
        filterResult.style.display = 'flex';
        filterResult.querySelector('div').textContent = `已筛选：${selectedFilters.join(', ')}`;
      } else {
        showToast('未选择任何筛选条件');
        filterResult.style.display = 'none';
      }
      
      // 收起筛选面板
      advancedFilters.classList.remove('active');
      filterIcon.classList.replace('fa-chevron-up', 'fa-chevron-down');
    });
    
    // 重置筛选按钮点击事件
    resetFiltersBtn.addEventListener('click', function() {
      // 重置所有筛选芯片
      filterChips.forEach(chip => {
        chip.classList.remove('active');
        if (chip.textContent.includes('全部') || chip.textContent.includes('不限')) {
          chip.classList.add('active');
        }
      });
      
      // 重置价格输入框
      document.querySelectorAll('.price-input').forEach(input => {
        input.value = '';
      });
      
      showToast('已重置所有筛选条件');
    });
    
    // 清除全部筛选按钮点击事件
    clearAllFiltersBtn.addEventListener('click', function() {
      // 重置快速筛选
      quickFilterItems.forEach(item => {
        item.classList.remove('active');
      });
      quickFilterItems[0].classList.add('active');
      
      // 重置高级筛选
      filterChips.forEach(chip => {
        chip.classList.remove('active');
        if (chip.textContent.includes('全部') || chip.textContent.includes('不限')) {
          chip.classList.add('active');
        }
      });
      
      // 重置价格输入框
      document.querySelectorAll('.price-input').forEach(input => {
        input.value = '';
      });
      
      // 隐藏筛选结果提示
      filterResult.style.display = 'none';
      
      showToast('已清除全部筛选条件');
    });
    
    // 切换视图模式
    viewOptions.forEach(option => {
      option.addEventListener('click', function() {
        viewOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        tasksList.classList.remove('list-view', 'grid-view', 'large-view');
        tasksList.classList.add(`${this.getAttribute('data-view')}-view`);
      });
    });
    
    // 申请任务按钮点击事件
    applyButtons.forEach(button => {
      button.addEventListener('click', function(e) {
        e.stopPropagation();
        const taskTitle = this.closest('.task-item').querySelector('.task-title').textContent;
        showToast(`已申请任务：${taskTitle.substring(0, 10)}...`);
      });
    });
    
    // 任务项点击事件 - 查看详情
    document.querySelectorAll('.task-item').forEach(item => {
      item.addEventListener('click', function() {
        const taskTitle = this.querySelector('.task-title').textContent;
        showToast(`查看任务详情：${taskTitle.substring(0, 10)}...`);
      });
    });
    
    // 发布任务按钮点击事件
    fabButton.addEventListener('click', function() {
      showToast('发布任务功能待实现');
    });
    
    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function() {
      const searchText = searchInput.value.trim();
      if (searchText) {
        showToast(`搜索：${searchText}`);
        filterResult.style.display = 'flex';
        filterResult.querySelector('div').textContent = `搜索：${searchText}`;
      } else {
        showToast('请输入搜索内容');
      }
    });
    
    // 搜索框回车事件
    searchInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        searchBtn.click();
      }
    });
  </script>
</body>
</html>
